import Vue from "vue";
import VueRouter from "vue-router";
import store from "@/store";

import routes from "./routes";
Vue.use(VueRouter);

const router = new VueRouter({
  mode: "history",
  routes,
  scrollBehavior() {
    return {
      x: 0,
      y: 0,
    };
  },
});

// 路由前置守卫 路由跳转的鉴权操作
// 1.设置白名单，控制哪些路由不需要登录就可以访问
const whitePath = [
  "Login",
  "Home",
  "Register",
  "Search",
  "Detail",
  "addCartSuccess",
];
// 2.配置全局前置守卫
router.beforeEach(async (to, from, next) => {
  console.log(1);

  // 从vuex中拿到token
  const token = store.state.user.token;
  // 3.判断是否存在
  if (token) {
    console.log(2);
    //5.判断我们要去的地方是不是登录页,如果是则直接回到首页
    if (to.name === "Login") {
      next("/home");
    } else {
      // 6.现在有token去的不是登录页,判断我们是否拥有用户信息(一般来说,登录只会返回token,然后我们一旦有token都会再次发送请求请求用户的详细信息)
      // !!取布尔值
      const isUserInfo = !!store.state.user.userInfo.nickName;

      if (isUserInfo) {
        next();
        //又有token 又有用户信息 则完全放行
      } else {
        //请求用户信息
        //异常处理,一旦刷新,token是持久化存的,用户信息不是持久化的,所以刷新以后一定会重新获取用户信息,一旦token过期或者token被篡改,则无法正常获取数据,此时应该清除掉已经报废的token,并且重新让用户登录
        //dispatch方法只是调用getUserInfo方法的一种方式,所以他的返回值和getUserInfo的返回值一致,都是返回promise实例
        try {
          await store.dispatch("user/getUSerInfo");
          next();
        } catch (err) {
          //如果获取用户信息异常,说明token已经不能用了,需要清掉重新登录
          store.dispatch("user/resetToken");
          next("/login");
        }
      }
    }
  } else {
    //4.当token不存在的时候
    //判断当前去的路由地址是不是在白名单中,如果是则直接放行,如果不是则直接把导航定位到登录页
    if (whitePath.includes(to.name)) {
      console.log(3);
      next();
    } else {
      console.log(4);
      next("/login");
    }
  }
});

export default router;
